<template>
  <div class="allot-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="header-left">
          <el-icon class="header-icon">
            <Box />
          </el-icon>
          <h1 class="page-title">调拨单管理</h1>
        </div>
        <div class="header-right">
          <span class="page-subtitle">调拨单查询与管理</span>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 搜索条件卡片 -->
      <el-card class="search-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <el-icon>
              <Search />
            </el-icon>
            <span>查询条件</span>
          </div>
        </template>

        <el-form :inline="true" :model="formInline" class="search-form">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="调拨单号">
                <el-input v-model="formInline.MovingCode" placeholder="请输入" clearable class="custom-input">
                  <template #prefix>
                    <el-icon>
                      <Document />
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="单据状态">
                <el-select v-model="formInline.State" placeholder="请选择" clearable class="custom-select"
                  style="width: 150px;">
                  <el-option label="待审核" value="待审核" />
                  <el-option label="驳回" value="驳回" />
                  <el-option label="审核成功" value="审核成功" />
                  <el-option label="审核失败" value="审核失败" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="出入库状态">
                <el-select v-model="formInline.InOutState" placeholder="请选择" clearable class="custom-select"
                  style="width: 150px;">
                  <el-option label="未出库" value="未出库" />
                  <el-option label="部分出库" value="部分出库" />
                  <el-option label="已出库" value="已出库" />
                  <el-option label="未入库" value="未入库" />
                  <el-option label="部分入库" value="部分入库" />
                  <el-option label="已入库" value="已入库" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="调拨申请日">
                <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
                  end-placeholder="结束日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" class="custom-date-picker"
                  @change="handleDateChange" />
              </el-form-item>
            </el-col>
          </el-row>

          <div class="form-actions">
            <el-button type="primary" @click="handleSearch" class="search-btn">
              <el-icon>
                <Search />
              </el-icon>
              查询
            </el-button>
            <el-button @click="handleReset" class="reset-btn">
              <el-icon>
                <Refresh />
              </el-icon>
              重置
            </el-button>
          </div>
        </el-form>
      </el-card>

      <!-- 操作按钮卡片 -->
      <el-card class="action-card" shadow="hover">
        <div class="action-buttons">
          <el-button type="success" @click="handleAdd" class="action-btn">
            <el-icon>
              <Plus />
            </el-icon>
            新增
          </el-button>
          <el-button type="danger" @click="handleBatchDelete" class="action-btn" :disabled="selectedRows.length === 0">
            <el-icon>
              <Delete />
            </el-icon>
            删除
          </el-button>
          <el-button type="warning" @click="handleBatchCopy" class="action-btn" :disabled="selectedRows.length === 0">
            <el-icon>
              <CopyDocument />
            </el-icon>
            复制
          </el-button>
          <el-button type="primary" @click="handleBatchApprove" class="action-btn"
            :disabled="selectedRows.length === 0">
            <el-icon>
              <Check />
            </el-icon>
            审核
          </el-button>
          <el-button type="info" @click="handleExport" class="action-btn">
            <el-icon>
              <Download />
            </el-icon>
            导出
          </el-button>
          <el-button @click="handleRefresh" class="action-btn">
            <el-icon>
              <Refresh />
            </el-icon>
            刷新
          </el-button>
        </div>
      </el-card>

      <!-- 数据表格卡片 -->
      <el-card class="table-card" shadow="hover">
        <template #header>
          <div class="table-header">
            <span class="table-title">调拨单列表</span>
            <span class="table-count">共 {{ page.totalCount }} 条记录</span>
          </div>
        </template>

        <el-table :data="tableData" style="width: 100%" border stripe v-loading="loading"
          element-loading-text="数据加载中..." @selection-change="handleSelectionChange" class="custom-table">
          <el-table-column type="selection" width="55" fixed="left" />
          <el-table-column label="#" width="60" fixed="left">
            <template #default="scope">
              {{ (page.PageIndex - 1) * page.PageSize + scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="movingCode" label="调拨单号" width="140" fixed="left">
            <template #default="scope">
              <el-link type="primary" @click="handleView(scope.row)">{{ scope.row.movingCode }}</el-link>
            </template>
          </el-table-column>
          <el-table-column prop="state" label="单据状态" width="100">
            <template #default="scope">
              <el-tag :type="getStateTagType(scope.row.state)">{{ scope.row.state }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="allotWarehouseType" label="调拨类型" width="100" />
          <el-table-column prop="original_OutWarehouse" label="调出仓库" width="100" />
          <el-table-column prop="original_InWarehouse" label="调入仓库" width="100" />
          <el-table-column prop="outState" label="出库状态" width="90">
            <template #default="scope">
              <el-tag :type="getOutStateTagType(scope.row.outState)">{{ scope.row.outState }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="inState" label="入库状态" width="90">
            <template #default="scope">
              <el-tag :type="getInStateTagType(scope.row.inState)">{{ scope.row.inState }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="allotCount" label="调拨数量" width="90" />
          <el-table-column prop="totalPrice" label="调拨金额" width="100">
            <template #default="scope">
              ¥{{ formatAmount(scope.row.totalPrice) }}
            </template>
          </el-table-column>
          <el-table-column prop="productNames" label="货品名称" width="120" />
          <el-table-column prop="creatorName" label="制单人" width="90" />
          <el-table-column prop="department_Name" label="所在部门" width="100" />
          <el-table-column prop="createTime" label="制单时间" width="140">
            <template #default="scope">
              {{ formatDateTime(scope.row.createTime) }}
            </template>
          </el-table-column>
          <el-table-column prop="reviewer" label="审核人" width="90" />
          <el-table-column prop="audit_Time" label="审核时间" width="140">
            <template #default="scope">
              {{ formatDateTime(scope.row.audit_Time) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120" fixed="right">
            <template #default="scope">
              <el-button v-if="['草稿', '待审核', '驳回'].includes(scope.row.state)" type="primary" size="small"
                @click="handleEdit(scope.row)">
                编辑
              </el-button>
              <el-button v-if="['草稿', '待审核', '驳回'].includes(scope.row.state)" type="danger" size="small"
                @click="handleDelete(scope.row)">
                删除
              </el-button>
              <el-button v-if="['审核成功', '已完成'].includes(scope.row.state)" type="warning" size="small"
                @click="handleRevoke(scope.row)">
                撤销
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination v-model:current-page="page.PageIndex" v-model:page-size="page.PageSize"
            :page-sizes="[10, 20, 50, 100]" :total="page.totalCount" layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" class="custom-pagination" />
        </div>
      </el-card>
    </div>

    <!-- 审核弹窗 -->
    <el-dialog
      v-model="approveDialogVisible"
      title="审核调拨单"
      width="500px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      class="approve-dialog"
    >
      <el-form :model="approveForm" :rules="approveRules" ref="approveFormRef" label-width="100px">
        <el-form-item label="审批状态" prop="state">
          <el-radio-group v-model="approveForm.state" class="approve-status-group">
            <el-radio label="审核成功" class="approve-radio">
              <el-icon class="radio-icon success"><Check /></el-icon>
              审核成功
            </el-radio>
            <el-radio label="审核失败" class="approve-radio">
              <el-icon class="radio-icon danger"><Close /></el-icon>
              审核失败
            </el-radio>
          </el-radio-group>
        </el-form-item>
        
        <el-form-item label="审批原因" prop="reason">
          <el-input
            v-model="approveForm.reason"
            type="textarea"
            :rows="4"
            placeholder="请输入审批原因..."
            maxlength="500"
            show-word-limit
            class="approve-reason-input"
          />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancelApprove" class="cancel-btn">取消</el-button>
          <el-button type="primary" @click="confirmApprove" :loading="approveLoading" class="confirm-btn">
            确认审核
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Box,
  Search,
  Plus,
  Delete,
  CopyDocument,
  Check,
  Download,
  Refresh,
  Document,
  Close
} from '@element-plus/icons-vue'
import { BasicsRed } from '@/http/axiosHelper'
import type { id } from 'element-plus/es/locales.mjs'

const router = useRouter()

// 响应式数据
const loading = ref(false)
const tableData = ref<any[]>([])
const selectedRows = ref<any[]>([])
const dateRange = ref([])

// 审核弹窗相关
const approveDialogVisible = ref(false)
const approveLoading = ref(false)
const approveFormRef = ref()
const approveForm = reactive({
  id:'',
  state: '',
  reason: ''
})

// 审核表单验证规则
const approveRules = {
  state: [
    { required: true, message: '请选择审批状态', trigger: 'change' }
  ],
  reason: [
    { required: true, message: '请输入审批原因', trigger: 'blur' },
    { min: 2, max: 500, message: '审批原因长度在 2 到 500 个字符', trigger: 'blur' }
  ]
}

// 分页参数
const page = reactive({
  PageIndex: 1,
  PageSize: 15,
  totalCount: 0
})

// 搜索表单
const formInline = reactive({
  MovingCode: '',
  State: '',
  InOutState: '',
  BegingTime: '',
  EndTime: ''
})

// 获取数据
const getData = async () => {
  loading.value = true
  try {
    console.log('发送请求参数:', {
      PageIndex: page.PageIndex,
      PageSize: page.PageSize,
      MovingCode: formInline.MovingCode,
      State: formInline.State,
      InOutState: formInline.InOutState,
      BegingTime: formInline.BegingTime,
      EndTime: formInline.EndTime
    })

    const response = await BasicsRed.get('/api/WorkOrder/GetAllot', {
      params: {
        PageIndex: page.PageIndex,
        PageSize: page.PageSize,
        MovingCode: formInline.MovingCode || undefined,
        State: formInline.State || undefined,
        InOutState: formInline.InOutState || undefined,
        BegingTime: formInline.BegingTime || undefined,
        EndTime: formInline.EndTime || undefined
      }
    })

    console.log('API响应:', response)

    if (response.data.code === 200) {
      tableData.value = response.data.pageData || []
      page.totalCount = response.data.totalCount || 0
      console.log('数据加载成功:', tableData.value)
    } else {
      ElMessage.error(response.data.message || '获取数据失败')
    }
  } catch (error: any) {
    console.error('获取数据失败:', error)
    ElMessage.error('获取数据失败，请检查网络连接')
    // 模拟一些测试数据
    tableData.value = [
      {
        id: 4,
        movingCode: 'YK20250728202746',
        state: '审核成功',
        createTime: '2024-02-29T21:37:33',
        allotWarehouseType: '货品调拨',
        original_OutWarehouse: '1号仓库',
        original_InWarehouse: '仓库1',
        allotCount: 46,
        totalPrice: 16400,
        reviewer: '赵子墨',
        productNames: '玉龙产品, 车皮',
        createUse: '10039',
        department_Name: '仓储部',
        audit_Time: '2024-02-29T21:37:33',
        inState: '已入库',
        outState: '已出库',
        creatorName: '甫惜梦'
      },
      {
        id: 5,
        movingCode: 'YK20250728202747',
        state: '待审核',
        createTime: '2024-02-29T21:37:33',
        allotWarehouseType: '货品调拨',
        original_OutWarehouse: '2号仓库',
        original_InWarehouse: '仓库2',
        allotCount: 30,
        totalPrice: 12000,
        reviewer: '赵子墨',
        productNames: '产品A, 产品B',
        createUse: '10040',
        department_Name: '仓储部',
        audit_Time: '2024-02-29T21:37:33',
        inState: '未入库',
        outState: '未出库',
        creatorName: '嵇歆美'
      },
      {
        id: 6,
        movingCode: 'YK20250728202748',
        state: '审核成功',
        createTime: '2024-02-29T21:37:33',
        allotWarehouseType: '货品调拨',
        original_OutWarehouse: '3号仓库',
        original_InWarehouse: '仓库3',
        allotCount: 25,
        totalPrice: 8000,
        reviewer: '赵子墨',
        productNames: '产品C, 产品D',
        createUse: '10041',
        department_Name: '仓储部',
        audit_Time: '2024-02-29T21:37:33',
        inState: '已入库',
        outState: '已出库',
        creatorName: '溥雨柏'
      },
      {
        id: 7,
        movingCode: 'YK20250728202749',
        state: '待审核',
        createTime: '2024-02-29T21:37:33',
        allotWarehouseType: '货品调拨',
        original_OutWarehouse: '4号仓库',
        original_InWarehouse: '仓库4',
        allotCount: 15,
        totalPrice: 6000,
        reviewer: '赵子墨',
        productNames: '产品E, 产品F',
        createUse: '10042',
        department_Name: '仓储部',
        audit_Time: '2024-02-29T21:37:33',
        inState: '未入库',
        outState: '未出库',
        creatorName: '宗政欣欣'
      },
      {
        id: 8,
        movingCode: 'YK20250728202750',
        state: '审核成功',
        createTime: '2024-02-29T21:37:33',
        allotWarehouseType: '货品调拨',
        original_OutWarehouse: '5号仓库',
        original_InWarehouse: '仓库5',
        allotCount: 35,
        totalPrice: 14000,
        reviewer: '赵子墨',
        productNames: '产品G, 产品H',
        createUse: '10043',
        department_Name: '仓储部',
        audit_Time: '2024-02-29T21:37:33',
        inState: '已入库',
        outState: '已出库',
        creatorName: '乌雅茉'
      }
    ]
    page.totalCount = 5
  } finally {
    loading.value = false
  }
}

// 搜索
const handleSearch = () => {
  page.PageIndex = 1
  getData()
}

// 重置
const handleReset = () => {
  Object.assign(formInline, {
    MovingCode: '',
    State: '',
    InOutState: '',
    BegingTime: '',
    EndTime: ''
  })
  dateRange.value = []
  page.PageIndex = 1
  getData()
}

// 日期变化处理
const handleDateChange = (dates: any) => {
  if (dates && dates.length === 2) {
    formInline.BegingTime = dates[0]
    formInline.EndTime = dates[1]
  } else {
    formInline.BegingTime = ''
    formInline.EndTime = ''
  }
}

// 选择变化
const handleSelectionChange = (selection: any) => {
  selectedRows.value = selection
}

// 分页大小变化
const handleSizeChange = (size: number) => {
  page.PageSize = size
  page.PageIndex = 1
  getData()
}

// 当前页变化
const handleCurrentChange = (current: number) => {
  page.PageIndex = current
  getData()
}

// 新增
const handleAdd = () => {
  //ElMessage.info('新增功能待实现')
  router.push({path:'/BasicsAddInventoryTransfer'})
}

// 批量删除
const handleBatchDelete = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请选择要删除的记录')
    return
  }

  ElMessageBox.confirm(
    `确认删除选中的 ${selectedRows.value.length} 条记录吗？`,
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    ElMessage.success('删除成功')
    getData()
  })
}

// 批量复制
const handleBatchCopy = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请选择要复制的记录')
    return
  }
  ElMessage.info('复制功能待实现')
}

// 批量审核
const handleBatchApprove = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请选择要审核的记录')
    return
  }
  
  // 检查选中的记录是否都是待审核状态
  const invalidRows = selectedRows.value.filter(row => row.state !== '待审核')
  if (invalidRows.length > 0) {
    ElMessage.warning('只能审核"待审核"状态的记录')
    return
  }
  
  // 重置表单并设置选中的ID
  approveForm.id = selectedRows.value.map(row => row.id).join(',')
  approveForm.state = ''
  approveForm.reason = ''
  
  console.log('选中的记录ID:', approveForm.id)
  
  // 打开审核弹窗
  approveDialogVisible.value = true
}

// 导出
const handleExport = async () => {
  try {
    const response = await BasicsRed({
      url: '/api/WorkOrder/GetAllotExport',
      method: 'GET',
      params: {
        PageIndex: page.PageIndex,
        PageSize: page.PageSize,
        MovingCode: formInline.MovingCode || undefined,
        State: formInline.State || undefined,
        InOutState: formInline.InOutState || undefined,
        BegingTime: formInline.BegingTime || undefined,
        EndTime: formInline.EndTime || undefined
      },
      responseType: 'blob'
    })

    const fileName = getFileNameFromHeaders(response.headers)
    const blob = new Blob([response.data], {
      type: response.headers['content-type'] || 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
    })
    const url = window.URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = url
    a.download = fileName
    document.body.appendChild(a)
    a.click()
    window.URL.revokeObjectURL(url)
    document.body.removeChild(a)

    ElMessage.success('导出成功')
  } catch (error: any) {
    console.error('导出失败:', error)
    ElMessage.error('导出失败，请检查参数或重新登录')
  }
}

// 刷新
const handleRefresh = () => {
  getData()
}

// 查看详情
const handleView = (row: any) => {
  console.log(1);
  // 将整条数据编码后传递到详情页面
  const encodedData = encodeURIComponent(JSON.stringify(row))
  router.push(`/BasicsmentAllotDetailView/${row.movingCode}?data=${encodedData}`)
  
}

// 编辑
const handleEdit = (row: any) => {
  ElMessage.info('编辑功能待实现')
}

// 删除
const handleDelete = (row: any) => {
  ElMessageBox.confirm(
    '确认删除这条记录吗？',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    ElMessage.success('删除成功')
    getData()
  })
}

// 撤销
const handleRevoke = (row: any) => {
  ElMessage.info('撤销功能待实现')
}

// 取消审核
const cancelApprove = () => {
  approveDialogVisible.value = false
  approveForm.id = ''
  approveForm.state = ''
  approveForm.reason = ''
}

// 确认审核
const confirmApprove = async () => {
  if (!approveFormRef.value) return
  
  try {
    await approveFormRef.value.validate()
    
    approveLoading.value = true
    
    // 构建审核数据
    const approveData = {
      id: approveForm.id.split(',').map(id => parseInt(id)),
      state: approveForm.state,
      reason: approveForm.reason,
     
    }
    
    console.log('审核数据:', approveData)
    
    // 调用审核API
    const response = await BasicsRed.put('/api/WorkOrder/UpdateInventoryHandle',approveData)
    
    if (response.data.code === 200) {
      ElMessage.success('审核成功')
      approveDialogVisible.value = false
      getData() // 刷新数据
    } else {
      ElMessage.error(response.data.message || '审核失败')
    }
  } catch (error: any) {
    console.error('审核失败:', error)
    if (error.message) {
      ElMessage.error(error.message)
    } else {
      ElMessage.error('审核失败，请稍后重试')
    }
  } finally {
    approveLoading.value = false
  }
}

// 获取状态标签类型
const getStateTagType = (state: string) => {
  const stateMap: { [key: string]: string } = {
    '草稿': 'info',
    '待审核': 'warning',
    '驳回': 'danger',
    '审核成功': 'success',
    '通过': 'success',
    '已完成': 'success'
  }
  return stateMap[state] || 'info'
}

// 获取出库状态标签类型
const getOutStateTagType = (state: string) => {
  const stateMap: { [key: string]: string } = {
    '未出库': 'info',
    '部分出库': 'warning',
    '已出库': 'success'
  }
  return stateMap[state] || 'info'
}

// 获取入库状态标签类型
const getInStateTagType = (state: string) => {
  const stateMap: { [key: string]: string } = {
    '未入库': 'info',
    '部分入库': 'warning',
    '已入库': 'success'
  }
  return stateMap[state] || 'info'
}

// 格式化日期
const formatDate = (date: string) => {
  if (!date) return ''
  return new Date(date).toLocaleDateString()
}

// 格式化日期时间
const formatDateTime = (dateTime: string) => {
  if (!dateTime) return ''
  const date = new Date(dateTime)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

// 格式化金额
const formatAmount = (amount: number) => {
  return amount?.toFixed(2) || '0.00'
}

// 从响应头获取文件名
const getFileNameFromHeaders = (headers: any) => {
  const contentDisposition = headers['content-disposition'] || headers['Content-Disposition']
  if (!contentDisposition) return '调拨单.xlsx'

  const match = contentDisposition.match(/filename\*?=([^;]+)/)
  if (match) {
    return decodeURIComponent(match[1].replace(/["']/g, ''))
  }
  return '调拨单.xlsx'
}

// 监听分页变化
watch(page, () => {
  getData()
})

// 组件挂载时获取数据
onMounted(() => {
  getData()
})
</script>

<style scoped>
.allot-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #409eff 0%, #67c23a 100%);
  padding: 20px;
}

.page-header {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 24px 32px;
  margin-bottom: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-icon {
  font-size: 32px;
  color: #409eff;
  background: linear-gradient(135deg, #409eff, #67c23a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-title {
  font-size: 28px;
  font-weight: 700;
  color: #2c3e50;
  margin: 0;
  background: linear-gradient(135deg, #409eff, #67c23a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-subtitle {
  color: #6c757d;
  font-size: 16px;
  font-weight: 500;
  padding: 8px 16px;
  background: rgba(108, 117, 125, 0.1);
  border-radius: 8px;
  border: 1px solid rgba(108, 117, 125, 0.2);
}

.main-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.search-card,
.action-card,
.table-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #2c3e50;
}

.search-form {
  margin-bottom: 0;
}

.custom-input,
.custom-select,
.custom-date-picker {
  width: 100%;
}

.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.search-btn,
.reset-btn {
  padding: 8px 20px;
  border-radius: 8px;
  font-weight: 500;
}

.action-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.action-btn {
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 500;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.table-title {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
}

.table-count {
  color: #6c757d;
  font-size: 14px;
}

.custom-table {
  border-radius: 8px;
  overflow: hidden;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.custom-pagination {
  --el-pagination-bg-color: transparent;
  --el-pagination-text-color: #2c3e50;
  --el-pagination-border-radius: 8px;
}

:deep(.el-table) {
  border-radius: 8px;
  overflow: hidden;
}

:deep(.el-table th) {
  background-color: #f8f9fa;
  color: #2c3e50;
  font-weight: 600;
}

:deep(.el-table td) {
  padding: 12px 0;
}

:deep(.el-button) {
  border-radius: 8px;
  font-weight: 500;
}

:deep(.el-tag) {
  border-radius: 6px;
  font-weight: 500;
}

/* 审核弹窗样式 */
.approve-dialog {
  :deep(.el-dialog__header) {
    background: linear-gradient(135deg, #409eff, #67c23a);
    color: white;
    border-radius: 8px 8px 0 0;
    padding: 20px;
  }
  
  :deep(.el-dialog__title) {
    color: white;
    font-weight: 600;
  }
  
  :deep(.el-dialog__body) {
    padding: 30px 20px;
  }
  
  :deep(.el-dialog__footer) {
    padding: 20px;
    border-top: 1px solid #e4e7ed;
  }
}

.approve-status-group {
  display: flex;
  gap: 20px;
}

.approve-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border: 2px solid #e4e7ed;
  border-radius: 8px;
  transition: all 0.3s ease;
  cursor: pointer;
  
  &:hover {
    border-color: #409eff;
    background: rgba(64, 158, 255, 0.05);
  }
  
  &.is-checked {
    border-color: #409eff;
    background: rgba(64, 158, 255, 0.1);
  }
}

.radio-icon {
  font-size: 16px;
  
  &.success {
    color: #67c23a;
  }
  
  &.danger {
    color: #f56c6c;
  }
}

.approve-reason-input {
  :deep(.el-textarea__inner) {
    border-radius: 8px;
    border: 1px solid #dcdfe6;
    transition: all 0.3s ease;
    
    &:focus {
      border-color: #409eff;
      box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
    }
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.cancel-btn {
  border-radius: 8px;
  padding: 8px 20px;
}

.confirm-btn {
  border-radius: 8px;
  padding: 8px 20px;
  background: linear-gradient(135deg, #409eff, #67c23a);
  border: none;
  
  &:hover {
    background: linear-gradient(135deg, #337ecc, #5daf34);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
  }
}
</style>